<template>
  <div class="convenients-wrap" v-if="listData.length">
    <Header title="便民服务"/>

    <van-list
        v-model:loading="loading"
        v-model:error="error"
        :finished="finished"
        finished-text="没有更多了"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
    >
      <div
          v-for="(item, idx) in listData"
          :key="idx"
          :style="{ marginTop: idx !== 0 ? '10px' : 0 }"
          class="card-wrap"
          @click="
        () => {
          handleToDetails(item);
        }
      "
      >
        <van-image
            fit="cover"

            class="img-cover" :src="item.url" style="object-fit: cover" />
        <div style="padding: 5px">
          <div class="server-box">
            <div class="title">{{ item.name }}</div>
            <img class="icon" :src="ArrowIcon" style="object-fit: cover" />
          </div>
          <div class="address">地址:{{ item.address }}</div>
        </div>
      </div>
    </van-list>
  </div>
  <div class="no-data" v-if="loading">
    <van-skeleton title :row="10" />
  </div>
</template>
<script setup lang="ts">
import ArrowIcon from '@/assets/images/icons/arrow-right.png';
import washImage from '@/assets/wash-service.jpg';
import barberShop from '@/assets/barber-shop.jpg';
import sewing from '@/assets/sewing.jpeg';
import { useRouter } from 'vue-router';
import api from '@/api/index';
import { ref, Ref } from 'vue';
import Header from '@/components/header/Header.vue';

const router = useRouter();
const loading = ref(false)
const finished = ref(false)
const error = ref(false)
interface IProps {
  id: string;
  name: string;
  address: string;
  url: string;
}
const listData: Ref<IProps[]> = ref([
  // {
  //   id: '1733049234028105728',
  //   name: '洗衣服务',
  //   address: '成都市~~~',
  //   url: washImage,
  // },
  // {
  //   id: '2',
  //   name: '理发服务',
  //   address: '成都市~~~',
  //   url: barberShop,
  // },
  // {
  //   id: '2',
  //   name: '缝补服务',
  //   address: '成都市~~~',
  //   url: sewing,
  // },
]);
const params = {
  pageNum: 1,
  pageSize: 10,
  reservationType:'4,5,6'
}
function onLoad() {
  loading.value = true
  finished.value = false
  api.getConvenienceList(params).then((res) => {
    loading.value = false
    if (res.code == '200') {
      var newList = res.data.list.map((e) => {
        return {
          id: e.id,

          name: e.scenicAreaName || e.merchantName,
          address: e.address,
          url: e.coverImageUrl,
          ...e,
        };
      });
      listData.value =[...listData.value,...newList]
      finished.value = res.data.currPage == res.data.totalPage
      params.pageNum++
    }
  }).catch(()=>{
    error.value=true
  }).finally(() => {
    loading.value = false
  });
}

onLoad();
const handleToDetails = (item: IProps) => {
  console.log('handleToDetails');
  router.push({
    path: '/new-storedetails',
    query: {
      id: item.id,
    },
  });
};
</script>
<style scoped lang="scss">
.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.convenients-wrap {
  background: #f5f5f5;

  padding: 10px;
  box-sizing: border-box;
  height: 100%;
  overflow: scroll;
  .card-wrap {
    width: 100%;
    background: white;
    border-radius: 1rem;
    padding-bottom: 0.8rem;
    box-sizing: border-box;
    .img-cover {
      height: 120px;
      width: 100%;
      border-top-right-radius: 1rem;
      border-top-left-radius: 1rem;
      object-fit: contain;
      overflow: hidden;
    }
    .server-box {
      display: flex;
      margin-top: 5px;
      align-items: center;
      justify-content: space-between;
      .title {
        font-size: 14px;
        color: #333;
        font-weight: bold;
      }
      .icon {
        width: 18px;
        height: 18px;
      }
    }
    .address {
      font-size: 12px;
      margin-top: 5px;
    }
  }
}
</style>
